<template>
  <!-- 注册页面的整体盒子 -->
  <div class="reg-container">
    <!-- 注册的盒子 -->
    <div class="reg-box">
      <!-- 标题的盒子 -->
      <div class="title-box"></div>
      <!-- 注册的表单区域 -->
     <el-form :model=" regForm" :rules="regRules" ref="regForm" class="formCss">
     <!-- 用户名 -->
     <el-form-item  prop="username">
    <el-input placeholder="请输入用户名" v-model="regForm.username"></el-input>
     </el-form-item>
    <!-- 密码 -->
    <el-form-item  prop="password">
    <el-input placeholder="请输入密码" type="password" v-model="regForm.password"></el-input>
    </el-form-item>
   <!-- 确认密码 -->
    <el-form-item  prop="repassword">
    <el-input placeholder="请输入再次确认密码" type="password" v-model=" regForm.repassword"></el-input>
    </el-form-item>
    <el-form-item >
      <el-button  @click="regHandler()" class="btn-reg"  type="primary">注册</el-button>
       <el-link type="info" @click="$router.push( '/login')">登录</el-link>
       </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
// 目标2: 渲染注册组件
// 2.1 观察项目注册页面, 去elemnt-ui 官网找el-form组件复制
// 2.2 根据需求进行修改( :model :rudel ladel-width)
// 目标3: 表单效验
// 3.1 定义校验规则对象
//     格式: regRules:{校验属性名:[一个对象表示一条规则]}
// 3.2 给 el-form 配置 :model(数据对象)  :rules(规则对象), 给 el-form-item 配置 prop属性(要校验的表单项名称)
// 3.3 在规则对象中写具体的校验规则
// 3.4 将自定义效验规则添加给repassword 校验项, validator函数,建议抽取到外面写箭头函数
// 目标4: 实现注册功能并跳转到登录页面
// 4.1 通过兜底效验后发起 ajax 请求, 进行注册
// 4.2 得到的响应结果进行判断, 成功或失败提示用户对应的信息(信息来源于服务器,提示用 $message)
// 4.3 注册成功后使用 $router 进行路由跳转 login 登录页面

export default {
  name: 'Reg',
  data () {
    //   两次密码结果比对
    // rule: 规则对象,一般不用
    // val: 当前校验规则对应的数据项:password
    // callback: 回调函数,不传参执行表示通过, 传入错误对象表示不通过
    const samePwd = (rule, val, callback) => {
      if (val === this.regForm.password) {
        callback()
      } else {
        callback(new Error('两次输入结果不一致'))
      }
    }

    return {
      regForm: {
        username: '',
        password: '',
        repassword: ''

      },
      regRules: {
        // 每个表单项的规则是一个数组
        username: [
          // 每个对象是一条规则
        //   pattern 正则, 需要使用正则效验
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的字母数字', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' },
          { validator: samePwd, trigger: 'blur' }
        ]

      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    regHandler () {
      // validate 会对整个表单进行 验证然后返回布尔值 ture flse
      this.$refs.regForm.validate(async result => {
        // console.log(result)
        // 对result 进行判断,来确定是否继续注册逻辑
        if (!result) return
        // console.log('ok,可以注册了')
        // async 加在 await 所在的函数声明出, 这两个关键词必须成对出现
        // 想/api/reg 接口发起请求, 传递用户填写的信息
        // post 方法接受两个参数
        // 参数1: url
        // 参数2: 要传递的数据对象 {username:"xxx"}
        const { data: res } = await this.$http.post('/api/reg', this.regForm)
        if (res.code !== 0) return this.$message.error(res.message)
        this.$message.success(res.message)
        // 跳转到登录页 路由 - 编程式导航 $route 路由参数对象  $router 路由导航对象
        // this.$router.push( path:'/login') 带参数写法
        // 不带参数可以简写路径
        this.$router.push('/login')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.reg-container {
  background: url('../../assets/images/login_bg.jpg') center;
  background-size: cover;
  height: 100%;

  .reg-box {
    width: 400px;
    height: 335px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .title-box {
      height: 60px;
      background: url('../../assets/images/login_title.png') center no-repeat;
    }
  }
  .formCss{
      padding: 0 30px
  }
  .btn-reg{
      width: 100%;
  }
}
</style>
